<template>
  <div class="common-table">
    <el-table :data="tableData" height="500px">
      <el-table-column
        show-overflow-tooltip
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <el-button size="mini" @click="headleEdit">编辑</el-button>
        <el-button size="mini" type="danger" @click="headleDelete">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object,
  },
  data() {
    return {
      //   tableData: [
      //     {
      //       name: "王小虎",
      //       age: 20,
      //       sex: "男",
      //       birth: "2016-05-03",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       name: "王小虎",
      //       age: 21,
      //       sex: "男",
      //       birth: "2016-05-02",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       name: "王小虎",
      //       age: 22,
      //       sex: "男",
      //       birth: "2016-05-04",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       name: "王小虎",
      //       age: 23,
      //       sex: "男",
      //       birth: "2016-05-01",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       name: "王小虎",
      //       age: 24,
      //       sex: "男",
      //       birth: "2016-05-08",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       name: "王小虎",
      //       age: 25,
      //       sex: "男",
      //       birth: "2016-05-06",
      //       address: "上海市普陀区金沙江路 1518 弄",
      //     },
      //   ],
      //   tableLabel: [
      //     {
      //       prop: "name",
      //       label: "姓名",
      //     },
      //     {
      //       prop: "age",
      //       label: "年龄",
      //     },
      //     {
      //       prop: "sex",
      //       label: "性别",
      //     },
      //     {
      //       prop: "birth",
      //       label: "出生日期",
      //       width: 200,
      //     },
      //     {
      //       prop: "address",
      //       label: "地址",
      //       width: 320,
      //     },
      //   ],
    };
  },
  methods: {
    headleEdit(row) {
      this.$emit("edit", row);
    },
    headleDelete(row) {
      this.$emit("del", row);
    },
    changePage(page) {
      this.$emit("changePage", page);
    },
  },
};
</script>
